<template>
  <el-menu
    :default-active="activeKey"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-menu-item :index="item.to" v-for="item in options" :key="item.to">
      <i :class="item.icon" />
      <span slot="title">{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  computed: {
    options() {
      return this.$store.state.nav.options;
    },
    activeKey: {
      get() {
        return this.$store.state.nav.activeKey;
      },
      set(val) {
        this.$store.commit("setActiveKey", val);
      }
    }
  },
  mounted() {
    this.activeKey = this.$route.path;
  },
  watch: {
    $route: function(val) {
      this.activeKey = val.path;
    }
  }
};
</script>

<style lang="stylus">
.el-menu
  border-right none
</style>
